<template>
    <div class="addGoods-container">
        <b-container class="bv-example-row row-box">
            <!-- 步骤条 -->
            <Steps :current="current">
                <Step title="商品信息" icon="ios-information-circle"></Step>
                <Step title="商品图片" icon="md-images"></Step>
                <Step title="发布商品" icon="ios-send"></Step>
            </Steps>
            <!-- 商品信息表单区域 -->
            <b-row align-h="center" class="my-goodsInfo">
                <b-col cols="12" sm="12" md="6" lg="6">
                    <div class="goodInfo">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="商品标题" prop="gTitle">
                                <Input v-model="formValidate.gTitle" maxlength="30"
                                show-word-limit type="textarea"
                                placeholder="请输入商品标题" clearable/>
                            </FormItem>
                            <FormItem label="商品名" prop="gName">
                                <Input v-model="formValidate.gName" placeholder="请输入商品名" clearable/>
                            </FormItem>
                            <FormItem label="商品价格" prop="gPrice">
                                <Input v-model="formValidate.gPrice" placeholder="请输入商品价格" clearable/>
                            </FormItem>
                            <FormItem label="商品原价" prop="gOriginalPrice">
                                <Input v-model="formValidate.gOriginalPrice" placeholder="请输入商品原价" clearable/>
                            </FormItem>
                            <FormItem label="商品成色" prop="gLevel">
                                <Input v-model="formValidate.gLevel" placeholder="请输入商品成色" clearable/>
                            </FormItem>
                            <FormItem label="商品运费" prop="gFire">
                                <Input v-model="formValidate.gFire" placeholder="请输入商品运费" clearable/>
                            </FormItem>
                            <FormItem label="类别">
                                <Row>
                                    <i-col span="11">
                                        <FormItem prop="gTidOne">
                                            <Select v-model="gTidOne"
                                            placeholder="一级类别" @on-change="changeOne(gTidOne)">
                                                <Option v-for="item in typeOne" :key="item.tId" :value="item.tId">{{ item.tName }}</Option>
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                    <i-col span="2" style="text-align: center">-</i-col>
                                    <i-col span="11">
                                        <FormItem prop="gTidTwo">
                                            <Select v-model="gTidTwo"
                                            placeholder="二级类别" @on-change="changeTwo(gTidTwo)">
                                                <Option v-for="item in typeTwo" :key="item.tId" :value="item.tId">{{ item.tName }}</Option>
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>
                            </FormItem>
                            <FormItem label="交易方式" prop="gTrade">
                                <RadioGroup v-model="formValidate.gTrade">
                                    <Radio label="1">一口价</Radio>
                                    <Radio label="0">可砍价</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="商品详情" prop="gDesc">
                                <Input v-model="formValidate.gDesc" type="textarea"
                                :autosize="{minRows: 5,maxRows: 12}" placeholder="请输入商品详情" clearable/>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">保存并继续</Button>
                                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                        </Form>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import getCurrentCityName from '@/utils/getUserLocation'

export default {
    name: 'updateGoods',
    data() {
        return {
            current: 1,
            gId: this.$route.params.gId,
            typeOne: [], // 一级类别
            typeTwo: [], // 二级类别
            gAddr: '', // 发布地点
            gTidOne: 0,
            gTidTwo: 0,
            formValidate: {
                gName: '',
                gTitle: '',
                gPrice: '',
                gOriginalPrice: '',
                gLevel: '',
                gDesc: '',
                gTrade: 3,
                gFire: '',
            },
            ruleValidate: {
                gName: [
                    { required: true, message: '商品名称不能为空', trigger: 'blur' },
                ],
                gTitle: [
                    { required: true, message: '商品标题不能为空', trigger: 'blur' },
                ],
                gPrice: [
                    { required: true, message: '商品价格不能为空', trigger: 'blur' },
                ],
                gOriginalPrice: [
                    { required: true, message: '商品原价不能为空', trigger: 'blur' },
                ],
                gLevel: [
                    { required: true, message: '商品成色不能为空', trigger: 'blur' },
                ],
                gTrade: [
                    { required: true, message: '商品交易方式不能为空', trigger: 'change' },
                ],
                gFire: [
                    { required: true, message: '商品运费不能为空', trigger: 'blur' },
                ],
                gDesc: [
                    { required: true, message: '商品详情不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    mounted() {
        this.getCurrentCity()
    },
    created() {
        this.findOneLevels()
        this.findById()
    },
    methods: {
        // 根据商品id查找此商品基本信息
        findById() {
            this.$axios({
                url: 'goods/findById/' + this.gId,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.formValidate = res.data.object
                    this.formValidate.gTrade = (res.data.object.gTrade).toString()
                    this.formValidate.gPrice = (res.data.object.gPrice).toString()
                    this.formValidate.gOriginalPrice = (res.data.object.gOriginalPrice).toString()
                    this.formValidate.gFire = (res.data.object.gFire).toString()
                    this.gTidTwo = res.data.object.types.tId
                    this.findByTypeId(res.data.object.types.tParentId) // 类别详情
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据二级类别id查找一级类别详情
        findByTypeId(id) {
            this.$axios({
                url: 'types/findById/' + id,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.gTidOne = res.data.object.tId
                    this.findTwoLevels(this.gTidOne)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 修改商品详情
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'goods/update',
                        method: 'get',
                        params: {
                            gName: this.formValidate.gName,
                            gAddr: this.gAddr,
                            gTid: this.gTidTwo,
                            gPrice: this.formValidate.gPrice,
                            gOriginalPrice: this.formValidate.gOriginalPrice,
                            gLevel: this.formValidate.gLevel,
                            gId: this.gId,
                            gTrade: this.formValidate.gTrade,
                            gFire: this.formValidate.gFire,
                            gDesc: this.formValidate.gDesc,
                            gTitle: this.formValidate.gTitle,
                        },
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            console.log(res.data)
                            let id = this.gId
                            this.$router.push({ name: 'updateGoodImgs', params: { id } })
                        }
                    })
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields()
        },
        // 百度地图定位获取当前城市
        getCurrentCity() {
            getCurrentCityName().then((city) => {
                // console.log(city) // 顺利的话能在控制台打印出当前城市
                this.gAddr = city
            })
        },
        // 查询所有一级商品类别
        findOneLevels() {
            this.$axios({
                url: 'types/findOneLevels',
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.typeOne = res.data.list
                }
            })
        },
        // 查询所有二级商品类别
        findTwoLevels(id) {
            this.$axios({
                url: 'types/findTwoLevels/' + id,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.typeTwo = res.data.list
                }
            })
        },
        // 一级类别选中状态改变时触发二级类别
        changeOne(value) {
            this.gTidOne = value
            this.$axios({
                url: 'types/findTwoLevels/' + value,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    this.typeTwo = res.data.list
                }
            })
        },
        // 触发二级类别
        changeTwo(value) {
            this.gTidTwo = value
        },
    },
}

</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.my-goodsInfo {
    margin-top: 20px;
}
</style>
